<template>
  <el-dialog  title="分账" :visible.sync="dialogVisible" width="500px" append-to-body :close-on-click-modal="false">
    <div class="flex align-center" v-loading="logLoading">
      <div style="text-wrap:nowrap">支付宝订单号：</div>
      <el-input v-model="splitAccount" placeholder="输入支付宝订单号" clearable></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :loading="logLoading" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="logLoading" size="small" @click="onSplitHandler">确定分账</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setRelationPrice } from '@/api/order'
export default {
  props:['splitParams'],
  data() {
    return {
      dialogVisible: false,
      splitAccount: "",
      logLoading: false
    }
  },
  watch:{
    dialogVisible(val) {
      if (val) {
        this.splitAccount = ""
      }
    }
  },
  methods: {
    onSplitHandler(){
      if(this.splitAccount === "") return this.$message.error('请输入支付宝订单号');
      let params = {
        leaseId: this.splitParams.leaseId,
        member_id: this.splitParams.member_id,
        cert_name: this.splitParams.cert_name,
        trade_no: this.splitAccount
      }
      this.logLoading = true
      setRelationPrice(params).then(res=>{
        this.$message.success('分账成功');
        this.logLoading = false
        this.dialogVisible = false
      }).catch(e=>{
        this.logLoading = false
      })
    }
  }
}
</script>

<style>
</style>
